<template>
  <div>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Chart from 'chart.js/auto'

const props = defineProps({
  chartData: Object,
  options: Object,
})

const chart = ref(null)
let chartInstance = null

onMounted(() => {
  if (chart.value) {
    chartInstance = new Chart(chart.value, {
      type: 'line',
      data: props.chartData,
      options: props.options,
    })
  }
})

watch(
  () => props.chartData,
  (newData) => {
    if (chartInstance) {
      chartInstance.data = newData
      chartInstance.update()
    }
  },
  { deep: true },
)
</script>
